import config from './chartConfig';
import { cloneDeep, assign } from 'lodash';
import { moment } from 'istrong-timeutil';
import Highcharts from 'istrong-highcharts';

let mergeOptions = (list, interval, bTime, eTime) => {
  let chartOpt = cloneDeep(config);

  let data = [];
  let maxVal = 20;
  let vInterval = 1000 * 3600;//1小时
  if (interval === '3h') {
    maxVal = 60;
  } else if (interval === '6h') {
    maxVal = 120;
  } else if (interval === '12h') {
    maxVal = 200;
  } else if (interval === '24h') {
    maxVal = 300;
  }
  let minVal = 0;
  let maxTime = 0;
  list.forEach((item, i) => {
    let time = parseInt(moment(item.time).format('x'), 10);
    data.push({
      x: time,
      y: item.val || 0
    });
    maxVal = Math.max(maxVal, item.val || 0);
    maxTime = Math.max(maxTime, time);
  });
  maxTime = parseInt(moment(moment(eTime).add('hour', 1).format('YYYY-MM-DDTHH:00:00')).format('x'), 10);
  let minTime = parseInt(moment(bTime).format('x'), 10)
  var yInterval = maxVal / 6;


  chartOpt = assign(chartOpt, {
    chart: {
      type: 'column',
      marginRight: 10,
      marginLeft: 30,
      marginTop: 20,
      marginBottom: 40,
      alignTicks: false
    },
    xAxis: {
      labels: {
        formatter: function () {
          // let length = this.axis.tickPositions.length;
          // if (length <= 7) {
          return moment(this.value).format('HH时<br/>DD日');
          // }
          // let index = 0;
          // this.axis.tickPositions.forEach((v, i) => {
          //   if (v === this.value) {
          //     index = i;
          //     return;
          //   }
          // })
          // return index % 3 === 0 ? moment(this.value).format('<span>HH时<br/>DD日</span>') : '';
        },
        autoRotation: 0,
        padding: 30,
        style: {
          textOverflow: 'none'
        }
      },
      lineColor: '#808080',
      lineWidth: 0,
      tickColor: '#808080',
      tickWidth: 1,
      tickLength: 5,
      tickPosition: 'outside',
      gridLineWidth: 1,
      endOnTick: false,
      max: maxTime,
      min: minTime,
      tickmarkPlacement: 'between',
      tickInterval: vInterval,
      tickAmount: 8
    },
    yAxis: [
      {
        lineWidth: 1,
        lineColor: '#808080',
        gridLineDashStyle: 'longdash',
        gridLineColor: '#E0E0E0',
        tickInterval: yInterval,
        endOnTick: false,
        labels: {
          align: 'right',
          x: -5,
          y: 0,
          formatter: function () {
            return this.value.toFixed(0)
          }
        },
        title: {
          text: 'mm',
          align: 'high',
          rotation: 0,
          x: 40,
          y: -13
        },
        max: maxVal,
        min: minVal,
        plotLines: []
      }
    ],
    series: [{
      data: data,
      color: '#5399d7'
      // borderWidth: 5,
      // borderColor: '#0000FF'
    }]
  });
  // chartOpt.xAxis.tickInterval = vInterval;
  // } else if (interval === '3h') {
  //   chartOpt.xAxis.tickInterval = vInterval;
  // }
  return chartOpt;
}
let renderChart = (chartViewer, chartId, chartData, interval, bTime, eTime) => {
  if (chartViewer) {
    chartViewer.destroy();
  }
  let list = chartData.data;

  let chartOpt = mergeOptions(list, interval, bTime, eTime);
  chartOpt.chart.renderTo = chartId;
  chartViewer = new Highcharts.Chart(chartOpt);
  return chartViewer;
};

export default renderChart;
